<script setup lang="ts">
import api from "@/api";
import {reactive} from "vue";
import type {AddressIndexType, AddressInfoType} from "@/types/address";
import {onShow} from "@dcloudio/uni-app";
interface stateType {
  list:AddressIndexType;
  loading:boolean;
}
const state = reactive<stateType>({
  list: [],
  loading:true,
})

const getAddressList = async () => {
  await api.address.indexApi().then((res:ApiResponse<PageResult<AddressInfoType>>) => {
    state.list = res.data.data
    state.loading = false
  })
}
onShow(()=>{
  getAddressList();
})

const toAddSite = () => {
  uni.navigateTo({
    url: '/pages/address/preview',
  });
}
const toEditSite = (id:number) => {
  uni.navigateTo({
    url: '/pages/address/preview?id=' + id,
  });
}

const onSelect = (addressInfo:AddressInfoType) => {
  uni.$emit('SELECT_ADDRESS', {addressInfo});
  uni.navigateBack();
}
</script>

<template>
  <view class="container">
    <view style="padding-bottom: 120rpx">
      <view class="item" v-for="(item, index) in state.list" :key="item.id">
        <view class="top" @tap="onSelect(item)">
          <view class="name">{{ item.consignee }}</view>
          <view class="phone">{{ item.mobile }}</view>
          <view class="tag">
            <text v-if="item.is_default===1"> 默认 </text>
          </view>
          <!-- <view class="tag">
            <text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
          </view> -->
        </view>
        <view class="bottom">
          {{ item.city_text }} {{ item.address }}
          <up-icon name="edit-pen" :size="40" color="#999999" @tap="toEditSite(item.id)"></up-icon>
        </view>
      </view>
    </view>
    <view class="addSite" @tap="toAddSite">
      <view class="add">
        <up-icon name="plus" color="#ffffff" class="icon" :size="30"></up-icon>新建收货地址
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container{
  padding: 30rpx;
}
.item {
  padding: 40rpx 20rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;
    .phone {
      margin-left: 60rpx;
    }
    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color:rgb(49, 145, 253);
      }
      .red{
        background-color:rgb(250, 180, 65)
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
    color: #999999;
  }
}
.addSite {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: fixed;
  bottom: 30rpx;
  left: 80rpx;
  background-color: rgb(250, 180, 65);
  border-radius: 60rpx;
  font-size: 30rpx;
  .add{
    display: flex;
    align-items: center;
    color: #ffffff;
    .icon{
      margin-right: 10rpx;
    }
  }
}
</style>
